<template>
	<view>
		<image class="bgImage" src="/static/image/guide/homeBg.png"></image>
		<view class="renwuBox">
			<image
				:src="rewuType==1?'https://cdn.yic3.cn/lawyer/images/aiNew1.png':'https://cdn.yic3.cn/lawyer/images/aiNew2.png'"
				mode="widthFix">
			</image>
		</view>
		<scroll-view :scroll-into-view="toView" ref="scrollContainer" :scroll-y="true" class="scrollBox"
			style="calc(100vh - 932rpx)">
			<view class="box1">
				<p>{{text1}}</p>
			</view>
			<view class="box2 box" v-if="boxList.includes(1)">
				<p>请问你的身份是什么？</p>
				<view class="">
					<view :class="index === formData.id?'selectSty':''" @click="selectId(index,1)"
						v-for="(item,index) in idList" :key="index">
						<image :src="item.img" mode=""></image>
						<p>{{item.name}}</p>
					</view>
				</view>
			</view>
			<p id="box2"></p>
			<view class="box2 box" v-if="boxList.includes(2)">
				<p>你使用嗨小律的目的是什么？</p>
				<view class="">
					<view :class="item == formData.purpose?'selectSty':''" @click="selectId(item)"
						v-for="(item,index) in purposeList" :key="index">
						<p>{{item}}</p>
					</view>
				</view>
				<p @click="choiceOk" id="box3">选好了</p>
			</view>
			<view class="box1" id="box4" v-if="isOk">
				<p>{{text2}}</p>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxList: [],
				isOk: false,
				text1: '',
				text2: '',
				toView: '',
				rewuType: 1,
				idList: [{
					img: 'http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon12.png',
					name: '学生'
				}, {
					img: 'http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon13.png',
					name: '律师'
				}, {
					img: 'http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon14.png',
					name: '职场人'
				}, {
					img: 'http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon15.png',
					name: '普通民众'
				}, ],
				purposeList: ['法律知识学习', '下载合同', '解决日常法律纠纷', '合同文书起草', '合同审查', '职场需要', '法律顾问', '其他'],
				formData: {
					id: '',
					purpose: ''
				}
			};
		},
		onLoad() {
			this.rewuType = uni.getStorageSync('selectRenWu') || 1

		},
		onReady() {
			let str = '嗨，我是你的AI小助理，接下来我们将进行一个简单的调查。'
			let index = 0;
			let timer
			const addCharToB = () => {
				if (index < str.length) {
					this.text1 += str.charAt(index);
					index++;
					if (timer) timer = null
					timer = setTimeout(addCharToB, 50);
				}
			};
			addCharToB();
			let timer1 = setTimeout(() => {
				this.boxList.push(1)
				timer1 = null
			}, 1700)
		},
		methods: {
			selectId(e, type) {
				if (type == 1) {
					this.formData.id = e
					this.boxList.push(2)
					this.$nextTick(() => {
						this.toView = 'box2'
					})

					console.log(123)
				} else {
					if (this.formData.purpose == '') this.toView = 'box3'
					this.formData.purpose = e
				}
			},
			choiceOk() {
				if (this.isOk) return
				this.isOk = true
				// #ifdef MP-WEIXIN
				wx.reportEvent("guide_select_report", {

				})
				// #endif
				// #ifdef APP
				plus.statistic.eventTrig('guide_select_report')
				this.$api.userEvent({
					type: 'click',
					key: 'guide_select_report',
					value: "select_report",
					extra: '引导页调查报告'
				}).then(res => {})
				// #endif
				let str = '你的需求我已经了解，接下来我们将为你提供合适的解决方案和指导建议。'
				let index = 0;
				this.$nextTick(()=>{
					this.toView = 'box4'
				})
				let timer
				const addCharToB = () => {
					if (index < str.length) {
						this.text2 += str.charAt(index);
						index++;
						if (timer) timer = null
						timer = setTimeout(addCharToB, 50);
					}
				};
				addCharToB();
				let timer1 = setTimeout(() => {
					uni.reLaunch({
						url: '/guide/pages/guide_5/guide_5'
					})
					timer1 = null
				}, 2500)

			}
		}

	}
</script>

<style lang="scss" scoped>
	@import 'guide_4.scss'
</style>
<style>
	page {
		background-color: #18171D;
	}
</style>